<template>
  <view class="page pd-30">
    <comHead :datas="datasObj"></comHead>

    <view class="card pd-20">
      <view class="ft1">业内比价说明</view>
      <view class="ft c-99 mt-20">{{ detailInfo.rate_des }}</view>
      <!-- <view class="btn flex-center">
                   <text class="ft">查看更多</text>
                   <image
            class="wh-24 ml-8"
            src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
          ></image
        >
              </view> -->
      <view style="height: 30rpx;" v-if="isShow === false"></view>
      <view class="btn ft c-66  flex-center" @click="openL" v-if="isShow">
        <text>{{ "展开更多" }}</text>
        <image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png"></image>
      </view>
      <view class="btn  ft c-66 flex-center" @click="closeL" v-else>
        <text>{{ "收起" }}</text>
        <image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
      </view>
    </view>
    <view class="compare auto mt-24">
      <view class="ft1 pd-20"><text class="c-dbf">业内</text><text class="ft1 c-ff">比价</text>
      </view>
      <view class="content pd-20">
        <view>
          <text class="ft c-99">项目名称</text>
          <text class="ft ml-40">{{ detailInfo.name }}</text>
        </view>
        <view class="flex mt-12">
          <view style="width: 190rpx" class="ft c-99">费用名称</view>
          <view class="ft">办理费用含（服务费）或（服务费+管理费/发行费+律师费+提升费用）</view>
        </view>
        <view class="mt-24 flex">
          <view class="baicai mr-12 ft flex-center"> 白菜移民</view>
          <text class="ft-num">VS</text>
          <text class="yenei ft flex-center ml-12">业内公司</text>
        </view>
        <view class="vsPrice pd-20 flex">
          <view style="border-right: 2rpx solid #F1F1F1; padding-right: 20rpx">
            <view class="item ft">白菜移民</view>
            <view class="item ft mt-24" v-for="item in detailInfo.comparison" :key="item.company_id">{{
              item.company_info.name }}</view>
          </view>
          <view style="padding-left: 20rpx">
            <view class="item1 ft">
              {{ detailInfo.show_currency_symbol }}
              {{ detailInfo.bc_price_show }} ({{ detailInfo.show_currency_name }})</view>
            <view class="item1 ft mt-24" v-for="item in detailInfo.comparison" :key="item.company_id">

              {{ item.currency_symbol }}{{ item.price }} ({{ item.currency_name }})</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReady } from '@dcloudio/uni-app'
import { ref, getCurrentInstance ,reactive} from 'vue';
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
  title: '业内比价',
  img: '',
  color: '#FFFFFF',
  direction: '',
  scrollTop: 0,
  noBack: false,
  isBorder: true
})
const detailInfo = ref({})
const getProductDetailData = (id) => {
  utils
    .request(
      api.getProductDetail,
      {
        id: id,
      },
      "get"
    )
    .then((res) => {
      detailInfo.value = res.data.info.check_spec_data;
    });
}

const het = ref('418rpx')

const isShow = ref(true)
const openL = () => {
  isShow.value = false;
  het.value = '448rpx'
}
const closeL = () => {
  isShow.value = true;
  het.value = '418rpx'
}
const { proxy } = getCurrentInstance()


onLoad((options) => {
  if (options.id) {
    getProductDetailData(options.id);

  }
  const eventChannel = proxy.getOpenerEventChannel();
  eventChannel.on('getDetail', (data) => {
    detailInfo.value = data.detailInfo
    console.log('detailInfo.value', detailInfo.value)
  });

})



</script>

<style lang="scss" scoped>
.card {
  width: 690rpx;
  // height: 276rpx;
  background: #F8F8F8;
  border-radius: 40rpx 40rpx 40rpx 40rpx;

  .btn {
    width: 650rpx;
    height: 74rpx;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    border-radius: 0rpx 0rpx 40rpx 40rpx;
  }
}

.compare {
  width: 690rpx;
  // height: 536rpx;
  background: #333333;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/ompare.png");
  background-size: 100% 100%;

  .content {
    width: 690rpx;
    // height: 458rpx;
    background: #f8f8f8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .baicai {
      width: 294rpx;
      height: 58rpx;
      background: #dbf046;
      border-radius: 20rpx 20rpx 0rpx 20rpx;
    }

    .yenei {
      width: 294rpx;
      height: 58rpx;
      background: #f1f1f1;
      border-radius: 20rpx 20rpx 0rpx 20rpx;
    }
  }

  .vsPrice {
    width: 650rpx;
    //height: 130rpx;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 100%);
    border-radius: 0rpx 0rpx 20rpx 20rpx;

    .item {
      width: 286rpx;
      height: 34rpx;
      text-align: right;
    }

    .item1 {
      width: 266rpx;
      height: 34rpx;
      text-align: left;
    }
  }

  .btn {
    width: 650rpx;
    height: 74rpx;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 100%);
    border-radius: 0rpx 0rpx 40rpx 40rpx;
  }
}
</style>